<template>
  <div class="main_app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="简介" name="introduce">
        <el-card class="box-card">
          <h2>GIT-MD-TOC</h2>
          <p>这是一个页面导航插件，分析网页结构，抽取H1~H6的文本组成导航目录，方便阅读。插件默认适配大部分技术博客网站和代码托管平台。除了默认设置，用户可自定义网站设置。只要会CSS选择器就可以。</p>
          <h2>已经适配的网站</h2>
          <ul>
            <li v-bind:key="hostinfo.host" v-for="hostinfo in settingOptions.urlConfig">
              <el-tag>{{hostinfo.host}}</el-tag>
            </li>
          </ul>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="设置" name="setting">
        <el-card class="box-card">
          <el-form label-width="200px">
            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
            <el-form-item label="显示位置">
              <el-select v-model="settingOptions.position" placeholder="请选择显示位置">
                <el-option label="左侧" value="ltr"></el-option>
                <el-option label="右侧" value="rtl"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="自动打开目录">
              <el-switch v-model="settingOptions.autOpen"></el-switch>
            </el-form-item>
            <el-form-item label="网站配置">
              <el-row>
                <el-button size="small" icon="el-icon-plus" @click="dialogVisible=true"></el-button>
              </el-row>
              <el-table :data="settingOptions.urlConfig" style="width: 100%">
                <el-table-column prop="host" label="域名"></el-table-column>
                <el-table-column prop="selector" label="css选择器"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="deleteRow(scope.$index,scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>

          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="添加网站配置" :visible.sync="dialogVisible">
      <el-form label-width="200px">
        <el-form-item label="域名">
          <el-input v-model="form.host"></el-input>
        </el-form-item>
        <el-form-item label="选择器">
          <el-input v-model="form.selector"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addHost">添加</el-button>
          <el-button @click="dialogVisible=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let settingOptionsDefault = {
  autOpen: false, //是否自动打开
  position: "rtl", //显示位置，rtl / ltr / ttb / btt
  urlConfig: [
    {
      host: "blog.csdn.net",
      selector: "article"
    },
    {
      host: "www.jianshu.com",
      selector: "article"
    },
    {
      host: "www.cnblogs.com",
      selector: ".post"
    },
    {
      host: "blog.51cto.com",
      selector: ".artical-Left-blog"
    },
    {
      host: "www.iteye.com",
      selector: "#blog_content"
    },
    {
      host: "wiki.7326it.club",
      selector: "#content"
    },
    {
      host: "gitee.com",
      selector: ".markdown-body"
    },
    {
      host: "github.com",
      selector: ".markdown-body"
    }
  ]
};
export default {
  name: "app",
  data() {
    return {
      activeName: "introduce",
      dialogVisible: false,
      form: {
        host: "gitee.com",
        selector: ".markdown-body"
      },
      settingOptions: {
        autOpen: false, //是否自动打开
        position: "rtl", //显示位置，rtl / ltr / ttb / btt
        urlConfig: []
      }
    };
  },
  methods: {
    save() {
      window.chrome.storage.sync.set(this.settingOptions, () => {
        this.$message({
          message: "本地保存成功",
          type: "success"
        });
      });
    },
    reset() {
      this.settingOptions = settingOptionsDefault;
      this.save();
      this.$message({
        message: "已恢复默认设置",
        type: "success"
      });
    },
    deleteRow(index, row) {
      this.$confirm("确定删除，"+row.host, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.settingOptions.urlConfig.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addHost() {
      this.settingOptions.urlConfig.push(this.form);
      this.$message({
        message: "添加成功",
        type: "success"
      });
    }
  },
  mounted() {
    //加载设置
    window.chrome.storage.sync.get(null, data => {
      if (data && data.urlConfig && data.urlConfig.length > 0) {
        this.settingOptions = data;
      } else {
        this.settingOptions = settingOptionsDefault;
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.main_app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 750px;
}
</style>
